<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入昵称、手机号" clearable />
        </el-form-item>

        <el-form-item label="购买类型" prop="subject">
          <el-input v-model="state.params.subject" placeholder="请输入购买类型" clearable />
        </el-form-item>

        <el-form-item label="支付方式" prop="trade_type">
          <el-select v-model="state.params.trade_type" placeholder="不限">
            <el-option v-for="item in payListOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="订单状态" prop="trade_status">
          <el-select v-model="state.params.trade_status" placeholder="不限">
            <el-option v-for="item in tradeStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开票状态" prop="invoice_status">
          <el-select v-model="state.params.invoice_status" placeholder="不限">
            <el-option v-for="item in invoiceStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="1级渠道" prop="utm_source">
          <el-input v-model="state.params.utm_source" placeholder="请输入1级渠道" clearable />
        </el-form-item>

        <el-form-item label="2级渠道" prop="utm_term">
          <el-input v-model="state.params.utm_term" placeholder="请输入2级渠道" clearable />
        </el-form-item>

        <el-form-item label="订单时间">
          <el-date-picker
            v-model="state.params._timeArr"
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="handleOpenDrawer()">新建订单</el-button>
        <el-button type="primary" @click="handleOpenDouDrawer()">新建抖店订单</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #nick_name="{ row }">
          <el-link @click="hadnleJump(row)">{{ row.nick_name }}</el-link>
        </template>
        <template #actions="{ row }">
          <el-link type="primary" @click="handleOpenDrawer(row)">编辑</el-link>
          <el-link :type="Number(row.trade_status) !== -300 ? 'danger' : undefined" :disabled="Number(row.trade_status) === -300" @click="handleRefund(row)">退款</el-link>
        </template>
      </k-table>
    </div>

    <EditDrawer ref="drawerRef" @after-submit="handleAfterSubmit" />
    <DouOrderDrawer ref="douDrawerRef" @after-submit="handleAfterSubmit" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { baseConfirm } from '@crud/index';
import { useTableList, tradeStatusOptions, payListOptions, invoiceStatusOptions } from './hooks/use-table';
import EditDrawer from './components/edit-drawer.vue';
import DouOrderDrawer from './components/dou-order-drawer.vue';

import { refundOrder } from '@/api/crm-kgj/order';
import { ElMessage } from 'element-plus';
import { AuthCode, hasPermission } from '@/modules/auth';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import { useRouter } from 'vue-router';

defineOptions({
  name: 'KgjOrderManage'
});
const { state, tableState, tableEvent, ...methods } = useTableList({});
const router = useRouter();
const drawerRef = ref();
const douDrawerRef = ref();
/** 打开抽屉 */
const handleOpenDrawer = (row?: any) => {
  /** 判断是否有新建/ 编辑 权限 */
  if (hasPermission(AuthCode.KGJ_ORDER_UPDATE)) {
    drawerRef.value.show(row ? 1 : 0, row);
  }
};
/** 打开抖店订单抽屉 */
const handleOpenDouDrawer = () => {
  if (hasPermission(AuthCode.KGJ_ORDER_UPDATE)) {
    douDrawerRef.value.show();
  }
};
/** 在提交后重新刷新列表 */
const handleAfterSubmit = () => {
  methods.onSearch();
};
/** 处理订单退款 */
const handleRefund = async (row: any) => {
  if (hasPermission(AuthCode.KGJ_ORDER_REFUND)) {
    const { trade_no } = row;
    try {
      const isPass = await baseConfirm({
        title: '订单退款',
        message: h('div', null, [h('span', null, '确认将'), h('span', { style: { color: 'blue' } }, trade_no), h('span', null, '，状态修改为已退款吗？')])
      });
      if (isPass) {
        const res = await refundOrder({ trade_no });
        if (!res.err) {
          ElMessage.success('修改订单状态成功');
          methods.onSearch();
        }
      }
    } catch (e) {
      console.error(e);
    }
  }
};
/** 跳转到用户管理页面 */
const hadnleJump = (row: any) => {
  const { user_id } = row;
  const link = router.resolve({ name: 'KgjUserManageIndex', query: { user_id } });
  window.open(link.href, '_blank');
};
</script>
